/* Question */
.questionbank h2 {
  margin-top: 0;
}

.questioncategories h3 {
  margin-top: 0;
}

#chooseqtypebox {
  margin-top: 1em;
}

#chooseqtype h3 {
  margin: 0 0 0.3em;
}

#chooseqtype .instruction {
  display: none;
}

#chooseqtype .fakeqtypes {
  border-top: 1px solid silver;
}

#chooseqtype .qtypeoption {
  margin-bottom: 0.5em;
}

#chooseqtype label {
  display: block;
}

#chooseqtype .qtypename img {
  padding: 0 0.3em;
}

#chooseqtype .qtypename {
  display: inline-table;
  width: 16em;
}

#chooseqtype .qtypesummary {
  display: block;
  margin: 0 2em;
}

#chooseqtype .submitbuttons {
  margin: 0.7em 0;
  text-align: center;
}

#qtypechoicecontainer {
  display: none;
}

#qtypechoicecontainer_c.yui-panel-container.shadow .underlay {
  background: none;
}

#qtypechoicecontainer.yui-panel .hd {
  color: #333;
  letter-spacing: 1px;
  text-shadow: 1px 1px 1px #fff;
  .border-top-radius(10px);
  border: 1px solid #ccc;
  border-bottom: 1px solid #bbb;
  #gradient > .vertical(#fff, #ccc);
}

#qtypechoicecontainer {
  font-size: 12px;
  color: #333;
  background: #F2F2F2;
  .border-radius(10px);
  border: 1px solid #ccc;
  border-top: 0 none;
  .box-shadow(5px 5px 20px 0 #666);
}

#qtypechoicecontainer #chooseqtype {
  width: 40em;
}

#chooseqtypehead h3 {
  margin: 0;
  font-weight: normal;
}

#chooseqtype .qtypes {
  position: relative;
  border-bottom: 1px solid #bbb;
  padding: 0.24em 0;
}

#chooseqtype .alloptions {
  overflow-x: hidden;
  overflow-y: auto;
  max-height: 400px;
  max-height: calc(100vh - 15em);
  /* The next line is a workaround because recess is crap. Delete ththe following line once
   * https://github.com/twitter/recess/issues/59 / https://github.com/twitter/recess/issues/75
   * is fixed. The previous line is the right one. */
  max-height: 60vh;
  width: 60%;
}

#chooseqtype .qtypeoption {
  margin-bottom: 0;
  padding: 0.3em 0.3em 0.3em 1.6em;
}

#chooseqtype .qtypeoption img {
  vertical-align: text-bottom;
  padding-left: 1em;
  padding-right: 0.5em;
}

#chooseqtype .selected {
  background-color: #fff;
  .box-shadow(0px 0 10px 0 #ccc);
}

#chooseqtype .instruction,
#chooseqtype .qtypesummary {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 60%;
  margin: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 1.5em 1.6em;
  background-color: #fff;
  overflow-y: auto;
}

#chooseqtype .instruction,
#chooseqtype .selected .qtypesummary {
  display: block;
}

#categoryquestions {
  margin: 0;
  td,
  th {
    padding: 0 0.2em;
  }
  th {
    text-align: left;
    font-weight: normal;
  }
  .checkbox {
    padding-left: 5px;
  }
  .checkbox input[type="checkbox"] {
    margin-left: 0px;
    float: none;
  }
  img.iconsmall {
    padding: 0;
  }
  .iconcol {
    padding: 3px;
  }
  label {
    margin: 0;
  }
}

#page-mod-quiz-edit {
  div.questionbankwindow div.header {
    margin: 0;
  }
  div.questionbankwindow.block {
    padding: 0;
  }
}

.dir-rtl #categoryquestions th {
  text-align: right;
}

.questionbank .singleselect {
  margin: 0;
}

/* Question editing form */
#combinedfeedbackhdr div.fhtmleditor {
  padding: 0;
}

#combinedfeedbackhdr div.fcheckbox {
  margin-bottom: 1em;
}

#multitriesheader div.fitem_feditor {
  margin-top: 1em;
}

#multitriesheader div.fitem_fgroup {
  margin-bottom: 1em;
}

#multitriesheader div.fitem_fgroup fieldset.felement label {
  margin-left: 0.3em;
  margin-right: 0.3em;
}

body.path-question-type .fitem_fgroup .accesshide {
  font: inherit;
  left: 0;
  position: static;
  padding-right: .3em;
}

.que {
  clear: left;
  text-align: left;
  margin: 0 auto 1.8em auto;
}

.dir-rtl .que {
  text-align: right;
}

.que .info {
  float: left;
  width: 7em;
  padding: 0.5em;
  margin-bottom: 1.8em;
  background-color: @grayLighter;
  border: 1px solid darken(spin(@grayLighter, -10), 7%);
  .border-radius(2px);
}

.que h3.no {
  margin: 0;
  font-size: 0.8em;
  line-height: 1;
}

.que span.qno {
  font-size: 1.5em;
  font-weight: bold;
}

.que .info > div {
  font-size: 0.8em;
  margin-top: 0.7em;
}

.que .info .questionflag.editable {
  cursor: pointer;
}

.que .info .editquestion img,
.que .info .questionflag img,
.que .info .questionflag input {
  vertical-align: bottom;
}

.que .content {
  margin: 0 0 0 8.5em;
}

.que .formulation,
.que .outcome,
.que .comment {
  .alert
}

.que .formulation {
  .alert-info;
  color: @textColor;
}

.formulation input[type="text"],
.formulation select {
  width: auto;
}

.path-mod-quiz input[size] {
  width: auto;
}

.que .outcome {
}

.que .comment {
  .alert-success;
}

.que .history {
  .well
}

.que .ablock {
  margin: 0.7em 0 0.3em 0;
}

.que .im-controls {
  margin-top: 0.5em;
  text-align: left;
}

.dir-rtl .que .im-controls {
  text-align: right;
}

.que .specificfeedback,
.que .generalfeedback,
.que .rightanswer,
.que .im-feedback,
.que .feedback,
.que p {
  margin: 0 0 0.5em;
}

.que .qtext {
  margin-bottom: 1.5em;
}

.que .correctness {
  .label;
  &.correct {
    background-color: @successText;
  }
  &.partiallycorrect {
    background-color: @orange;
  }
  &.notanswered,
  &.incorrect {
    background-color: @errorText;
  }
}

.que .validationerror {
  color: @errorText;
}

// copied from .formFieldState in mixin.less
// and made more specific
.answerState(@textColor, @backgroundColor) {
  @borderColor: @textColor;
  color: @textColor;
  background-color: @backgroundColor;
  border-color: @borderColor;
  .box-shadow(inset 0 1px 1px rgba(0, 0, 0, .075)); // Redeclare so transitions work
  &:focus {
    border-color: darken(@borderColor, 10%);
    @shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px lighten(@borderColor, 20%);
    .box-shadow(@shadow);
  }
}

.formulation .correct {
  background-color: @successBackground;
}

.formulation .partiallycorrect {
  background-color: @warningBackground;
}

.formulation .incorrect {
  background-color: @errorBackground;
}

.formulation select.correct,
.formulation input.correct {
  .answerState(@successText, @successBackground);
}

.formulation select.partiallycorrect,
.formulation input.partiallycorrect {
  .answerState(@warningText, @warningBackground);
}

.formulation select.incorrect,
.formulation input.incorrect {
  .answerState(@errorText, @errorBackground);
}

.que .grading,
.que .comment,
.que .commentlink,
.que .history {
  margin-top: 0.5em;
}

.que .history h3 {
  margin: 0 0 0.2em;
  font-size: 1em;
}

.que .history table {
  width: 100%;
  margin: 0;
}

.que .history .current {
  font-weight: bold;
}

.que .questioncorrectnessicon {
  vertical-align: text-bottom;
}

.que input.questionflagimage {
  padding-right: 3px;
}

.dir-rtl .que input.questionflagimage {
  padding-left: 3px;
  padding-right: 0;
}

.importerror {
  margin-top: 10px;
  border-bottom: 1px solid #555;
}

.mform .que.comment .fitemtitle {
  width: 20%;
}

#page-question-preview #techinfo {
  margin: 1em 0;
}

/** Overide for RTL layout **/
.dir-rtl #chooseqtype .instruction,
.dir-rtl #chooseqtype .qtypesummary {
  right: 60%;
  left: 0%;
  border-left: 0;
  border-right: 1px solid grey;
}

// imported from quiz.css

#page-mod-quiz-edit .box.generalbox.questionbank {
  padding: 0.5em;
}

#page-mod-quiz-edit .questionbank .categorypagingbarcontainer,
#page-mod-quiz-edit .questionbank .categoryquestionscontainer,
#page-mod-quiz-edit .questionbank .choosecategory {
  padding: 0;
}

#page-mod-quiz-edit .questionbank .choosecategory select {
  width: 100%;
}

#page-mod-quiz-edit div.questionbank .categoryquestionscontainer {
  background: transparent;
}

#page-mod-quiz-edit #categoryquestions > thead {
  background: #FFF;
}

#page-mod-quiz-edit #categoryquestions > tbody > tr:nth-of-type(even) {
  background: #e4e4e4;
}

#page-mod-quiz-edit .questionbankwindow div.header {
  color: #444;
  text-shadow: none;
  padding: 3px;
  .border-top-radius(4px);
  margin: 0 -10px 0 -10px;
  padding: 2px 10px 2px 10px;
  background: transparent; /* Old browsers */
}

#page-mod-quiz-edit .questionbankwindow div.header a:link,
#page-mod-quiz-edit .questionbankwindow div.header a:visited {
  color: @linkColor;
}

#page-mod-quiz-edit .questionbankwindow div.header a:hover {
  color: @linkColorHover;
}

#page-mod-quiz-edit .createnewquestion {
  padding: 0.3em 0;
  div, input {
    margin: 0;
  }
}

#page-mod-quiz-edit .questionbankwindow div.header .title {
  color: @textColor;
}

#page-mod-quiz-edit div.container div.generalbox {
  background-color: transparent;
  padding: 1.5em;
}

#page-mod-quiz-edit .categoryinfo {
  background-color: transparent;
  border-bottom: none;
}

#page-mod-quiz-edit .createnewquestion .singlebutton input {
  margin-bottom: 0;
}

#page-mod-quiz-edit div.questionbank .categorysortopotionscontainer,
#page-mod-quiz-edit div.questionbank .categoryselectallcontainer {
  padding: 0 0 1.5em 0;
}

#page-mod-quiz-edit div.questionbank .categorypagingbarcontainer {
  background-color: transparent;
  margin: 0;
  border-top: 0;
  border-bottom: 0;
  .paging {
    padding: 0 0.3em;
  }
}

#page-mod-quiz-edit div.question div.content div.questioncontrols {
  background-color: @bodyBackground;
}

#page-mod-quiz-edit div.question div.content div.points {
  margin-top: -0.5em;
  padding-bottom: 0em;
  border: none;
  background-color: @bodyBackground;
  position: static;
  width: 12.1em;
  float: right;
  margin-right: 60px;
}

#page-mod-quiz-edit.dir-rtl div.question div.content div.points {
  float: left;
  margin-left: 60px;
  margin-right: 0px;

}

#page-mod-quiz-edit div.question div.content div.points br {
  display: none;
}

#page-mod-quiz-edit div.question div.content div.points label {
  display: inline-block;
}

#page-mod-quiz-edit div.quizpage .pagecontent .pagestatus {
  background-color: @bodyBackground;
}

#page-mod-quiz-edit .quizpagedelete,
#page-mod-quiz-edit .quizpagedelete img {
  background-color: transparent;
}

#page-mod-quiz-edit div.quizpage .pagecontent {
  border: 1px solid #ddd;
  .border-radius(2px);
  overflow: hidden;
}

#page-mod-quiz-edit div.questionbank .categoryinfo {
  padding: 0.3em 0;
}

#page-mod-quiz-edit div.questionbank .modulespecificbuttonscontainer {
  padding: 0;
  strong {
    display: block;
  }
  hr, br {
    display: none;
  }
  strong {
    margin-left: -0.3em;
  }
  strong label {
    margin-left: 0.3em;
  }
  input {
    margin-left: 0;
  }
  input + input {
    margin-left: 5px;
  }
}

.questionbankwindow .module {
  width: auto;
}

#page-mod-quiz-edit div.editq div.question div.content {
  background-color: @bodyBackground;
  border: 1px solid #ddd;
  .border-radius(2px);
  overflow: hidden;
}

.path-mod-quiz .statedetails {
  display: block;
  font-size: 0.9em;
}

a#hidebankcmd {
  color: @linkColor;
}

// override question plugins

// qtype_shortanswer

.que.shortanswer .answer {
  padding: 0;
}

.que label {
  display: inline;
}

body.path-question-type .mform fieldset.hidden {
  padding: 0;
  margin: 0.7em 0 0;
}
